@charset "UTF-8";

// @mixin    @include 
//function center-block(){}   
//没有参数的mixin的创建和调用
@mixin center-block{
    margin-left: auto;
    margin-right: auto;
}
div{
    width: 400px;
    @include center-block;
}

//有参数的mixin的创建和调用
//function(x,y){}

/*
    如果想要设置默认值只需要在变量后加:值即可

*/
$default-width:500px !default;
@mixin size($width:$default-width,$height:500px){
    width:$width;
    height: $height;
    
}

div{
    /*
        如果参数有默认值那么调用的时候想要使用默认值，就可以直接写名字不写括号
    */
    @include size();
    background: red;
}

//要求传入的参数为top left right bottom
@mixin sanjiao($arrow){
    border:{
        width: 50px;
        style: solid;
        color: transparent;
        @if $arrow == top{
            bottom-color: red;
        }@else if $arrow == right{
            left-color: red;
        }@else if $arrow == left{
            right-color: red;
        }@else{
            top-color: red;
        }
    }
}

// .top,.bottom,.left,.right{
//     display: block;
//     @include size(0,0);
// }
%public {
    display: block;
    @include size(0,0);
}

.top{
    @extend %public;
    @include sanjiao(top);
}
.bottom{
    @extend %public;
    
    @include sanjiao(bottom);
}
.left{
    @extend %public;
    
    @include sanjiao(left);
}
.right{
    @extend %public;
    
    @include sanjiao(right);
}

// @mixin  如果参数是多个值
// box-shadow:2px 2px 3px, 3px 4px 3px inset;

@mixin boxShadow($v...){
    box-shadow: $v;
}
div{   
    @include boxShadow(2px 2px 2px);
}
div{   
    @include boxShadow(2px 2px 2px,3px 3px 3px,4px 4px 4px);
}


@mixin size2($width:100px,$height:100px){
    width: $width;
    height: $height;
    @content;
}

div{
    @include size2(){
        font-size:20px;
        line-height: 10px;
    };
}

%size{
    display: block;
    width: 0;
    height: 0;
}

//@extend
a{
    color: red;
}
div{
    @extend a;
}
%float{
    float:left;
}
@for $i from 1 through 12{
    .col-xs-#{$i}{
        @extend %float;
        width: 100 / 12 * $i * 1%;
    }
}

//@for循环数组
$list1: 1px 2px 3px 4px;
@for $i from 1 through length($list1){
    div{
        width: nth($list1,$i);
    }
}